<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-collection"></i>
      <span>树轮成果管理-图预览</span>
    </div>
    <div class="content">
      <div class="search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: flex;">
          <el-form-item label="">
            <el-input v-model="formInline.user" placeholder="请输入成果信息" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit" icon="el-icon-refresh-left">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tabs">
        <div class="tabs-header">
          <p>所属类目：</p>
          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
            <el-tab-pane label="全部" name="all"></el-tab-pane>
            <el-tab-pane label="类目一" name="first"></el-tab-pane>
            <el-tab-pane label="类目二" name="second"></el-tab-pane>
            <el-tab-pane label="类目三" name="third"></el-tab-pane>
            <el-tab-pane label="类目四" name="fourth"></el-tab-pane>
            <el-tab-pane label="类目五" name="five"></el-tab-pane>
            <el-tab-pane label="类目六" name="six"></el-tab-pane>
            <el-tab-pane label="类目七" name="seven"></el-tab-pane>
            <el-tab-pane label="类目八" name="eight"></el-tab-pane>
            <el-tab-pane label="类目九" name="nine"></el-tab-pane>
            <el-tab-pane label="类目十" name="ten"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="tabs-content">
          <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: flex;">
            <p>其他选项：</p>
            <el-form-item label="活跃用户：">
              <el-input v-model="formInline.user" placeholder="不限" style="width: 300px;"></el-input>
            </el-form-item>
            <el-form-item label="好评度：">
              <el-input v-model="formInline.user" placeholder="不限" style="width: 300px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="grid-container">
            <div class="grid-item" v-for="(item, index) in items" :key="index">
              <img :src="item.image" alt="Image description" class="item-image" style="cursor: pointer;" @click="handeJump('/treeRing')">
              <div class="item-text" @click="handeJump('/articlePreview')">
                <h3>{{ item.title }}</h3>
                <p>{{ item.text }}</p>
                <div class="grid-item-footer">
                  <p>{{ item.time }}</p>
                  <img :src="item.imageuser" alt="Image description" style="width: 35px; height: 35px;">
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="footer">
          <div style="margin-top: 20px">
            <el-button @click="selectAll">选择全部</el-button>
            <el-button @click="inverseSelection">反向选择</el-button>
            <el-button @click="toggleSelection()">清楚选择</el-button>
            <el-button @click="toggleSelection()">删除所选</el-button>
          </div>
          <div class="block">
            <span class="demonstration"></span>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
              layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "treeRing",
  components: {},
  data() {
    return {
      activeTab: 'first', // 默认激活第一个标签
      formInline: {
        user: "",
        region: "",
      },
      items: [
        { image: require('@/assets/images/tuyulan1.jpg'), title: '树木年轮碳氢氧稳定同位素的基础', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan3.jpg'), title: '年轮关于气候', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan2.jpg'), title: '北大资源与环境科学学院', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan1.jpg'), title: '树木年轮碳氢氧稳定同位素的基础', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan2.jpg'), title: '近代科学研究已揭示', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan3.jpg'), title: '年轮与地理', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan2.jpg'), title: '树木年轮碳氢氧稳定同位素', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan1.jpg'), title: '年轮关于气候', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan3.jpg'), title: '北大资源与环境科学学院', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan2.jpg'), title: '树木年轮碳氢氧稳定同位素的基础', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan3.jpg'), title: '近代科学研究已揭示', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
        { image: require('@/assets/images/tuyulan1.jpg'), title: '年轮与地理', text: '近代科学研究已揭示', time: '5小时前', imageuser: require('@/assets/top-bar/nav_user.png') },
      ],
      currentPage4: 4,
    };
  },
  created() { },
  methods: {
    handeJump(path) {
      this.$router.push({ path: path });
    },
    onSubmit() { },
    onSearch() { },
    selectAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 反向选择
    // 反选，重新遍历一遍数据
    inverseSelection() {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 1rem;
  background: #fff;
  margin-top: 1.5rem;
}

.header {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: rgb(7, 46, 82);
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  background: #fff;
  /* 确保背景为白色 */
}

.content {
  margin: 2rem 2rem;
  border: #eceaeae8 1px solid;
  padding: 1rem 2rem;
  // display: flex;
  overflow: hidden;
}

.tabs {
  padding: 1rem;
}

.tabs-header {
  display: flex;

  p {
    margin-right: 10px;
    margin-top: 9px;
  }
}

.tabs-content {
  p {
    margin-right: 10px;
    margin-top: 9px;
  }
}

/* 这部分是增加按钮圆角的样式 */
.el-button {
  border-radius: 5px;
  /* 增大圆角 */
}

.el-button--primary {
  border-radius: 5px;
  /* 确保主要按钮也有相同的圆角 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 6列 */
  grid-gap: 10px;
  /* 间距 */
  padding: 10px;
}

.grid-item {
  border: 1px solid #ccc;
  /* 边框 */
  border-radius: 5px;
  /* 圆角 */
  overflow: hidden;
  /* 隐藏溢出的内容 */
}

.item-image {
  width: 100%;
  /* 宽度100% */
  height: 240px;
  /* 高度自动 */
}

.item-text {
  padding: 10px;
  text-align: left;
  cursor: pointer;
  /* 设置鼠标悬停时的样式为指针 */
  margin-left: 10px;
}

.grid-item-footer {
  display: flex;
  justify-content: space-between;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block {
  display: flex;
  gap: 16px;
  /* Adjust gap to your preference */
  margin-top: 20px;
}
</style>